<template>
  <div class="service">
    <div class="sibian flex">
      <img src="../assets/zdfury.png" alt="" style="width:.22rem;height:.22rem;">
      <span style="padding-left:0.12rem;">重点服务人员</span>
    </div>
    <div class="" id="echartsService" style="width:100%;height:4rem;"></div>
    <service :isShow="dialogFormVisible" @close="closeDialog" :titleDialog="titles"></service>
  </div>
</template>

<script>
const echarts = require('echarts');
import service from '@/components/manageFW';
import {ServicesPopulation} from '@/api/index.js';
export default {
  data() {
    return {
      current: 1,
      size: 10,
      echarts: null,
      dialogFormVisible: false,
      formLabelWidth: 100,
      titles: '',
      tableLoading: false,
      total: 100,
      echartDatas:[],
      tableData: [
        {
          qu: '历下区',
          jiedao: '文化东路',
          sfz: '370100101010',
          xm: '李栋',
          xb: '男',
          mz: '汉',
          lxfs: '18615247756',
          jzd: '兴济河小区',
          dw: '1',
        },
      ],
      form: {
        name: '',
        region: '',
      },
    };
  },
  components: {
    service,
  },
  created(){
    // this.ServicesPopulations()
        
  },
  mounted() {
this.echarts = echarts.init(document.getElementById('echartsService'));
         this.drawPies();
  },
  methods: {
    closeDialog(val) {
      console.log(val, '123456');
      this.dialogFormVisible = false;
    },
    indexSort() {},
   async drawPies() {
       try {
        const{data}  = await ServicesPopulation()
        // console.log(data)
         this.echartDatas=data.date
        // console.log(this.echartDatas);
      } catch (error) {
        console.log(error)
      }
      let self = this;

      // let title = '总量';
      let color = [
        '#E70012',
        '#FF8352',
        '#E271DE',
        '#F8456B',
        '#00FFFF',
        '#4AEAB0',
        '#6BF6F9',
        '#C549A9',
        '#0808F2',
        '#FFEF66',
      ];
      let echartData =this.echartDatas
      // console.log(echartData);
      //  [
      //   {
      //     name: '民政关爱',
      //     value: '120',
      //   },
      //   {
      //     name: '保洁',
      //     value: '220',
      //   },
      //   {
      //     name: '残疾',
      //     value: '1000',
      //   },
      //   {
      //     name: '闲散',
      //     value: '132',
      //   },
      //   {
      //     name: '孤寡老人',
      //     value: '389',
      //   },
      //   {
      //     name: '社区矫正',
      //     value: '100',
      //   },
      //   {
      //     name: '伤残',
      //     value: '332',
      //   },
      //   {
      //     name: '安保',
      //     value: '10',
      //   },
      //   {
      //     name: '留守儿童',
      //     value: '140',
      //   },
      //   {
      //     name: '嫌疑人员',
      //     value: '110',
      //   },
      // ];
      // let formatNumber = function(num) {
      //   let reg = /(?=(\B)(\d{3})+$)/g;
      //   return num.toString().replace(reg, ",");
      // };
      // let total = echartData.reduce((a, b) => {
      //   return a + b.value * 1;
      // }, 0);
      this.$nextTick(() => {
        self.echarts.setOption({
          color: color,
          // tooltip: {
          //     trigger: 'item'
          // },
          title: [
            {
              // text: '{name|' + title + '}\n{val|' + formatNumber(total) + '}',
              text: '{name|' + '人员' + '}\n{val|' + '10' + '}',
              top: '20%',
              left: '42%',
              textStyle: {
                fontSize: 15,
                color: '#6BF6F9',
                rich: {
                  name: {
                    fontSize: 14,
                    fontWeight: 'normal',
                    color: '#6BF6F9',
                    padding: [10, 0],
                  },
                  val: {
                    fontSize: 10,
                    fontWeight: 'bold',
                    color: '#6BF6F9',
                    padding: [0, 10],
                  },
                },
              },
            },
          ],
          legend: {
            orient: 'horizontal',
            icon: 'circle',
            bottom: 'bottom',
            y: '60%',
            x: '8%',
            itemWidth: 10,
            itemHeight: 10,
            align: 'left',
            itemGap: 15,
            textStyle: {
              rich: {
                name: {
                  fontSize: 12,
                  color: '#fff',
                  align: 'left',
                  width: 40,
                },
                value: {
                  fontSize: 12,
                  color: '#6BF6F9',
                  padding: [0, 5, 0, 10],
                  verticalAlign: 'right',
                  align: 'left',
                  width: 40,
                },
                unit: {
                  fontSize: 12,
                },
              },
            },
            formatter: function(name) {
              let res = echartData.filter(v => v.name === name);
              res = res[0] || {};
              return '{name|' + name + '}  {value|' + res.value + '}';
            },
            // data: legendName
          },
          series: [
            {
              type: 'pie',
              radius: ['35%', '50%'],
              center: ['50%', '29%'],
              data:echartData,
              hoverAnimation: false,
              label: {
                normal: {
                  show: false,
                },
              },
            },
          ],
        });
      });
      self.echarts.on('click', function(params) {
        console.log(params);
        self.dialogFormVisible = true;
        self.titles = '重点服务人员';
      });
    },
    handleSizeChange() {},
    handleCurrentChange() {},
  },
};
</script>

<style lang="scss">
.service {
  width: 44%;
  margin-left: 0.15rem;
  height: 4.4rem;
  background: #03123d;
  margin-top: 0.3rem;
  // margin-left: 0.26rem;
}
</style>

